<template>
  <div id="category">
    <div ref="chart01" class="chart01"></div>
  </div>
</template>

<script>
export default {
  name: 'Category',
  props: {
    nameList: Array,
    series: Array,
    yAxis: Array,
    xAxis: Object
  },
  data() {
    return {
      option: {
        color: ['#5793f3', '#d14a61', '#675bba'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'none'
          }
        },
        grid: {
          right: '30%'
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        xAxis: [],
        yAxis: [],
        series: []
      }
    };
  },
  created() {},
  mounted() {
    this.initCharts();
  },
  watch: {
    series(nVal) {
      this.initCharts();
    }
  },
  computed: {},
  methods: {
    initCharts() {
      this.option.yAxis = this.yAxis;
      this.option.series = this.series;
      this.yAxis[0].position = 'left';
      // this.yAxis[0].axisLine.show = true;
      this.option.xAxis = this.xAxis;
      this.drawChart01();
    },
    drawChart01() {
      let that = this;
      let myChart1 = that.$echarts.init(that.$refs.chart01);
      console.log(this.option);
      myChart1.clear();
      myChart1.setOption(this.option);
      //   myChart1.setOption({
      //     graphic: {
      //       type: 'image',
      //       bounding: 'raw',
      //       top: '60%',
      //       left: '15%'
      //     }
      //   });
      /*窗口自适应，关键代码*/
      //   setTimeout(function () {
      //     window.addEventListener('resize', function () {
      //       myChart1.resize();
      //     });
      //   }, 200);
    }
  }
};
</script>

<style lang="less" scoped>
#category {
  width: 100%;
  height: 100%;
  .chart01 {
    width: 100%;
    height: 500px;
    overflow: hidden;
    clear: both;
  }
}
</style>